{% extends 'base/nav.html' %}

{% block title %}个人中心 - 旅游舆情监测{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <!-- 用户信息侧边栏 -->
            <div class="card">
                <div class="card-body text-center">
                    {% if user.avatar %}
                        <img src="{{ user.avatar.url }}" alt="头像" class="img-thumbnail rounded-circle mb-3" style="width: 120px; height: 120px;">
                    {% else %}
                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 120px; height: 120px;">
                            <i class="fa fa-user fa-3x text-muted"></i>
                        </div>
                    {% endif %}
                    <h4>{{ user.username }}</h4>
                    <p class="text-muted">{{ user.bio|default:"这个人很懒，什么都没有写..." }}</p>
                    <p class="text-muted">
                        <i class="fa fa-map-marker"></i> {{ user.location|default:"未知" }}
                    </p>
                    <div class="btn-group-vertical w-100">
                        <a href="{% url 'users:chahead' %}" class="btn btn-outline-primary">
                            <i class="fa fa-camera"></i> 修改头像
                        </a>
                        <a href="{% url 'users:profile_update' %}" class="btn btn-outline-secondary">
                            <i class="fa fa-edit"></i> 编辑资料
                        </a>
                        <a href="{% url 'users:cha' %}" class="btn btn-outline-info">
                            <i class="fa fa-key"></i> 修改密码
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <!-- 统计信息 -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card bg-primary text-white">
                        <div class="card-body text-center">
                            <i class="fa fa-map-marker fa-3x mb-2"></i>
                            <h3>{{ user_stats.attractions_count }}</h3>
                            <p>创建的景点</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-success text-white">
                        <div class="card-body text-center">
                            <i class="fa fa-comment fa-3x mb-2"></i>
                            <h3>{{ user_stats.comments_count }}</h3>
                            <p>发表的评论</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-info text-white">
                        <div class="card-body text-center">
                            <i class="fa fa-heart fa-3x mb-2"></i>
                            <h3>{{ user_stats.collections_count }}</h3>
                            <p>收藏的景点</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-rocket"></i> 快速操作
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <a href="{% url 'users:attraction_create' %}" class="btn btn-success btn-lg w-100 mb-2">
                                <i class="fa fa-plus"></i><br>创建景点
                            </a>
                        </div>
                        <div class="col-md-4 text-center">
                            <a href="{% url 'users:attraction_list' %}" class="btn btn-primary btn-lg w-100 mb-2">
                                <i class="fa fa-list"></i><br>我的景点
                            </a>
                        </div>
                        <div class="col-md-4 text-center">
                            <a href="{% url 'collect:my_collections' %}" class="btn btn-warning btn-lg w-100 mb-2">
                                <i class="fa fa-heart"></i><br>我的收藏
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-clock-o"></i> 最近创建的景点
                            </h5>
                        </div>
                        <div class="card-body">
                            {% if recent_attractions %}
                                {% for attraction in recent_attractions %}
                                <div class="media mb-3">
                                    {% if attraction.main_image %}
                                    <img src="{{ attraction.main_image.url }}" class="mr-3" alt="{{ attraction.name }}" style="width: 50px; height: 50px; object-fit: cover;">
                                    {% else %}
                                    <div class="mr-3 bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                        <i class="fa fa-map-marker text-muted"></i>
                                    </div>
                                    {% endif %}
                                    <div class="media-body">
                                        <h6 class="mt-0">
                                            <a href="{% url 'main:attraction_detail' attraction.pk %}">
                                                {{ attraction.name }}
                                            </a>
                                        </h6>
                                        <small class="text-muted">
                                            {{ attraction.created_at|timesince }}前
                                            <span class="badge badge-secondary">{{ attraction.get_status_display }}</span>
                                        </small>
                                    </div>
                                </div>
                                {% endfor %}
                            {% else %}
                                <p class="text-muted text-center">暂无创建的景点</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fa fa-comments"></i> 最近评论
                            </h5>
                        </div>
                        <div class="card-body">
                            {% if recent_comments %}
                                {% for comment in recent_comments %}
                                <div class="media mb-3">
                                    <div class="media-body">
                                        <h6 class="mt-0">
                                            <a href="{% url 'main:attraction_detail' comment.attraction.pk %}">
                                                {{ comment.attraction.name }}
                                            </a>
                                        </h6>
                                        <p class="mb-1">{{ comment.content|truncatewords:10 }}</p>
                                        <small class="text-muted">
                                            {{ comment.created_at|timesince }}前
                                            <span class="badge badge-{{ comment.sentiment_label }}">
                                                {{ comment.get_sentiment_label_display }}
                                            </span>
                                        </small>
                                    </div>
                                </div>
                                {% endfor %}
                            {% else %}
                                <p class="text-muted text-center">暂无评论</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    margin-bottom: 20px;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.btn-group-vertical .btn {
    margin-bottom: 5px;
}

.media img {
    border-radius: 4px;
}
</style>
{% endblock %}